<!--
 * @Author: byron
 * @Date: 2021-10-06 23:17:01
 * @LastEditTime: 2021-10-07 10:05:27
-->
<template>
    <div class="detail">
        <DetailHeader :topData="topData" v-if="topData" />
        <div class="tabs-warp" v-if="gensongs.length">
            <Tabs :tabs="tabs" v-model="activeIndex" />
        </div>
        <div>
            <DetailSongTable :tableData="gensongs" :showHeader="true" />
        </div>
    </div>
</template>

<script>
import DetailHeader from './header.vue'
import DetailSongTable from '@/components/song-table.vue'
import { getListDetail, getSongDetail } from '@/api'
import { createSong } from '@/utils'
export default {
    components: { DetailHeader, DetailSongTable },
    props: ['songId'],
    data() {
        return {
            tabs: ['歌曲列表', '评论'],
            activeIndex: 0,
            gensongs: [],
            topData: {},
        }
    },
    watch: {},
    computed: {},
    methods: {
        async genSong(trackIds) {
            const { songs } = await getSongDetail(trackIds.slice(0, 300))
            const gensongs = songs.map(({ id, name, al, ar, mv, dt }) => {
                return createSong({
                    id,
                    name,
                    artists: ar,
                    duration: dt,
                    mvId: mv,
                    albumName: al.name,
                    img: al.picUrl,
                })
            })
            this.gensongs = gensongs
        },
        async getIds() {
            const { playlist } = await getListDetail({
                id: this.songId,
            })
            console.log(playlist)
            this.topData = {
                name: playlist.name,
                desc: playlist.description,
                coverImgUrl: playlist.coverImgUrl,
                createTime: playlist.createTime,
                tags: playlist.tags.join('/'),
                creator: playlist.creator,
            }
            const trackIds = playlist.trackIds.map(({ id }) => id)
            this.genSong(trackIds)
        },
    },
    created() {
        this.getIds()
    },
    mounted() {},
}
</script>
<style lang="scss" scoped>
.tabs-warp {
    margin: 0px 20px;
}
</style>
